<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no" />
		<title>首页</title>
		<link rel="stylesheet" type="text/css" href="../c/aui.css" />
	</head>
	<style>
		.love {
			display: block;
			width: 100px;
			height: 100px;
			background: url('https://www.zhangxinxu.com/study/201512/web_heart_animation.png') 0 0 no-repeat;
			background-size: 2900%;
			animation: heart-burst steps(28) 0.8s    ;
		}
		.stop {
			animation-play-state: paused;
		}
		@keyframes heart-burst {
		0% {
		background-position: 0%;
		}
		100% {
		background-position: 100%;
		}
		}
	</style>
	<body>
		<i id="testImg" class="love"></i>
		<p>
			<input type="button" id="testBtn" value="暂停">
		</p>
	</body>
	<script type="text/javascript" src="../j/api.js"></script>
	<script type="text/javascript">
		apiready = function() {
		}
		var image = document.getElementById("testImg"), button = document.getElementById("testBtn");
		if (image.classList && image && button) {
			button.onclick = function() {
				if (this.value == '暂停') {
					image.classList.add('stop');
					this.value = '播放';
				} else {
					image.classList.remove('stop');
					this.value = '暂停';
				}
			};
		}
	</script>
</html>